<template>
	<view class="filtrates">
		<view class="flex j-sb a-center relative z-index-100 bg-white py-2 px-3">
			<view :class="['items',activeIndex==1||formData.area?'active':'']" @click="handleFil(1)">
				<view class="te" v-if="!formData.area">区域</view>
				<view class="te" v-else>{{formData.area}}</view>
				<u-icon name="arrow-up-fill" color="#12a7f5" size="12" v-if="activeIndex==1||formData.area"></u-icon>
				<u-icon name="arrow-down" color="#888" size="12" v-else></u-icon>
			</view>
			<view :class="['items',activeIndex==2||formData.start_price?'active':'']" @click="handleFil(2)">
				<view class="te" v-if="!formData.start_price">价格</view>
				<view class="te" v-else>{{formData.start_price}}万-{{formData.end_price}}万</view>
				<u-icon name="arrow-up-fill" color="#12a7f5" size="12"
					v-if="activeIndex==2||formData.start_price"></u-icon>
				<u-icon name="arrow-down" color="#888" size="12" v-else></u-icon>
			</view>
			<view :class="['items',activeIndex==3||formData.house?'active':'']" @click="handleFil(3)">
				<view class="te" v-if="!formData.house">户型</view>
				<view class="te" v-else>{{formData.house}}</view>
				<u-icon name="arrow-up-fill" color="#12a7f5" size="12" v-if="activeIndex==3||formData.house"></u-icon>
				<u-icon name="arrow-down" color="#888" size="12" v-else></u-icon>
			</view>
			<view :class="['items',activeIndex==4||formData.sort?'active':'']" @click="handleFil(4)">
				<view class="te" v-if="!formData.sort">排序</view>
				<view class="te" v-else>{{formData.sort}}</view>
				<u-icon name="arrow-up-fill" color="#12a7f5" size="12" v-if="activeIndex==4||formData.sort"></u-icon>
				<u-icon name="arrow-down" color="#888" size="12" v-else></u-icon>
			</view>
		</view>
		<view class="mask" v-if="activeIndex>0" @click="activeIndex='-1'"></view>
		<view class="main " v-if="activeIndex==1">
			<view class="flex j-start">
				<scroll-view class="scroll-height span-7 " :scroll-y="true" :scroll-x="false">
					<view class="py-2">{{cityInfo.cityName}}</view>
				</scroll-view>
				<scroll-view class="scroll-height bg-white span-13" :scroll-y="true" :scroll-x="false">
					<view :class="['py-2','relative',areaIndex==index?'active':''] " v-for="(item,index) in areaList"
						:key="index" @click="handleArea(item,index)">
						{{item.areaName}}
						<view class="icon" v-if="areaIndex==index">
							<u-icon name="checkbox-mark" color="#ff0000" size="16"></u-icon>
						</view>
					</view>
				</scroll-view>
				<!-- <scroll-view class="scroll-height bg-white" :scroll-y="true" :scroll-x="false">
					<view class="py-1">全市</view>
				</scroll-view> -->
			</view>
			<view class="btn flex j-around a-center bg-white px-3 pb-3 pt-1">
				<view class="h-70 rounded-60 col-8 text-center border flex j-center a-center" @click="restArea">重置
				</view>
				<view class="bg-primary h-70 rounded-60 col-8 text-center text-white flex j-center a-center"
					@click="sureArea">完成
				</view>
			</view>
		</view>

		<view class="main " v-if="activeIndex==2">
			<view class="bg-white p-3">
				<view class="text-center pb-4">
					<text class="font-38" style="border-bottom: 3px solid #167bff;">价格区间</text>
				</view>
				<view class="flex j-sb a-center px-4">
					<input v-model="queryParams.start_price" class="h-80 col-8 pl-2 bg-light-secondary rounded-10"
						type="digit" />
					<input v-model="queryParams.end_price" class="h-80 col-8 pl-2 bg-light-secondary rounded-10"
						type="digit" />
				</view>
				<view class="price-list">
					<view :class="['item',priceIndex==index?'active':'']" v-for="(item,index) in priceList" :key="index"
						@click="handlePrice(item,index)">
						{{item}}
						<view class="icon" v-if="priceIndex==index">
							<u-icon name="checkbox-mark" color="#ff0000" size="16"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="btn flex j-around a-center bg-white px-3 pb-3 pt-1">
				<view class="h-70 rounded-60 col-8 text-center border flex j-center a-center" @click="restPrice">重置
				</view>
				<view class="bg-primary h-70 rounded-60 col-8 text-center text-white flex j-center a-center"
					@click="surePrice">完成
				</view>
			</view>
		</view>

		<view class="main " v-if="activeIndex==3">
			<view class="bg-white p-3">
				<view class="house-list">
					<view :class="['item',houseIndex==index?'active':'']" v-for="(item,index) in houseList" :key="index"
						@click="handleHouse(item,index)">
						{{item}}
						<view class="icon" v-if="houseIndex==index">
							<u-icon name="checkbox-mark" color="#ff0000" size="16"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="btn flex j-around a-center bg-white px-3 pb-3 pt-1">
				<view class="h-70 rounded-60 col-8 text-center border flex j-center a-center" @click="restHouse">重置
				</view>
				<view class="bg-primary h-70 rounded-60 col-8 text-center text-white flex j-center a-center"
					@click="sureHouse">完成
				</view>
			</view>
		</view>

		<view class="main " v-if="activeIndex==4">
			<view class="bg-white p-3">
				<view class="house-list">
					<view :class="['item',sortIndex==index?'active':'']" v-for="(item,index) in sortList" :key="index"
						@click="handleSort(item,index)">
						{{item}}
						<view class="icon" v-if="sortIndex==index">
							<u-icon name="checkbox-mark" color="#ff0000" size="16"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="btn flex j-around a-center bg-white px-3 pb-3 pt-1">
				<view class="h-70 rounded-60 col-8 text-center border flex j-center a-center" @click="restSort">重置
				</view>
				<view class="bg-primary h-70 rounded-60 col-8 text-center text-white flex j-center a-center"
					@click="sureSort">完成
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		areaLists
	} from '@/api/city.js'
	export default {
		props: {
			show: {
				type: String,
				default: '-1',
			},
		},
		watch: {
			cityInfo: {
				handler(newValue, oldValue) {
					this.getCityList(); //监听到数据变化执行方法
				},
				deep: true // 深度监听父组件传过来对象变化
			}
		},
		data() {
			return {
				activeIndex: 0,
				queryParams: {
					area: '',
					areaCode: '',
					price: '',
					house: '',
					sort: '',
					start_price: '',
					end_price: '',

				},
				areaList: [],
				areaIndex: null,

				priceList: ['40万以下', '40万-60万', '60万-80万', '80万-100万', '100万-150万', '150万-200万', '200万-250万', '250万-300万',
					'300万以上'
				],
				priceIndex: null,

				houseList: ['不限', '一室', '二室', '三室', '四室', '四室以上'],
				houseIndex: null,

				sortList: ['单价从低到高', '单价从高到低'],
				sortIndex: null,
				formData: {
					area: '',
					areaCode: '',
					price: '',
					house: '',
					sort: '',
					start_price: '',
					end_price: '',
					amountUnitFlag: ''
				}
			}
		},
		onShow() {

		},

		methods: {
			// 获取区域
			getCityList() {
				if (this.cityInfo && this.cityInfo.cityCode) {
					areaLists({
						cityCode: this.cityInfo.cityCode
					}).then(res => {
						this.areaIndex = null;
						this.queryParams.area = '';
						this.formData.area = '';
						this.areaList = res.data;
					})
				}

			},
			// 打开各个筛选
			handleFil(index) {
				if (this.activeIndex == index) {
					this.activeIndex = '-1'
				} else {
					this.activeIndex = index;
				}

				if (index == 1 && this.areaList.length == 0) {
					this.getCityList()
				}

			},
			// 区域
			handleArea(item, index) {
				this.areaIndex = index;
				this.queryParams.area = item.areaName;
				this.queryParams.areaCode = item.areaCode;
			},
			restArea() {
				this.areaIndex = null;
				this.queryParams.area = '';
				this.queryParams.areaCode = '';
			},
			sureArea() {
				this.activeIndex = '-1';
				this.formData.areaCode = this.queryParams.areaCode;
				this.formData.area = this.queryParams.area;
				this.$emit('query', this.formData)
			},
			// 价格
			handlePrice(item, index) {
				this.priceIndex = index;
				if (index == 0) {
					this.queryParams.start_price = 1;
					this.queryParams.end_price = 40
				} else if (index == 8) {
					this.queryParams.start_price = 300;
					this.queryParams.end_price = 1000
				} else {
					this.queryParams.start_price = item.split('-')[0].replace('万', '');
					this.queryParams.end_price = item.split('-')[1].replace('万', '');
				}

			},
			restPrice() {
				this.priceIndex = null;
				this.queryParams.start_price = '';
				this.queryParams.end_price = ''
			},
			surePrice() {
				this.activeIndex = '-1';
				this.formData.start_price = this.queryParams.start_price;
				this.formData.end_price = this.queryParams.end_price;
				this.$emit('query', this.formData)
			},

			// 户型
			handleHouse(item, index) {
				this.houseIndex = index;
				this.queryParams.house = item;
			},
			restHouse() {
				this.houseIndex = null;
				this.queryParams.house = '';
			},
			sureHouse() {
				this.activeIndex = '-1';
				this.formData.house = this.queryParams.house;
				this.$emit('query', this.formData)
			},

			// 排序
			handleSort(item, index) {
				this.sortIndex = index;
				this.queryParams.sort = item;
			},
			restSort() {
				this.sortIndex = null;
				this.queryParams.sort = '';
				this.formData.amountUnitFlag = ''
			},
			sureSort() {
				//asc从低到高 desc从高到低
				this.activeIndex = '-1';
				this.formData.sort = this.queryParams.sort;
				if (this.queryParams.sort == '单价从低到高') {
					this.formData.amountUnitFlag = 'asc'
				} else if (this.queryParams.sort == '单价从高到低') {
					this.formData.amountUnitFlag = 'desc'
				} else {
					this.formData.amountUnitFlag = ''
				}
				this.$emit('query', this.formData)
			}

		},

	}
</script>

<style lang="scss" scoped>
	.filtrates {
		.items {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 25%;
			height: 70rpx;

			.te {
				max-width: 150rpx;
				margin-right: 6rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.active {
			.te {
				color: #167bff;
			}
		}

		.scroll-height {
			height: 500rpx;
			padding: 0 30rpx;
			background-color: #f5f5f5;

			.icon {
				position: absolute;
				bottom: 10rpx;
				right: 20rpx;
			}

			.active {
				color: #167bff;
			}
		}

		.main {
			width: 100%;
			position: relative;
			z-index: 10000;
			border-top: 1px solid #eaeaae;


		}

		.mask {
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1;

		}

		.price-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			margin-top: 40rpx;

			.item {
				width: 212rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				height: 70rpx;
				line-height: 70rpx;
				position: relative;
				border-radius: 30px;
				text-align: center;
				background-color: #f5f5f5;
				font-size: 28rpx;
			}

			.icon {
				position: absolute;
				bottom: 10rpx;
				right: 10rpx;
			}



			.active {
				color: #167bff;
			}
		}

		.house-list {
			.item {
				height: 70rpx;
				line-height: 70rpx;
				position: relative;
			}

			.icon {
				position: absolute;
				bottom: 20rpx;
				right: 10rpx;
			}

			.active {
				color: #167bff;
			}
		}
	}
</style>